import React, {useState} from 'react';
import {useEffect} from 'react'
import './Ruku.less';
import Handle from '../utils/Handle'
// import img from '../../../assets/zhongli.png'
import {TagOutlined, HddOutlined, AccountBookOutlined} from '@ant-design/icons'
import Footer from '../utils/Footer'
import http from "../../../utils/http";
import store from "../../../store/store";
import {message} from "antd";

function Ruku() {
    // useEffect(() => {
    const ruku=(status,ids)=>{
        http({
            url: 'api/goods/stockToGoods',
            method: "post",
            data: {
                status,
                ids
            }
        }).then((res => {
            if (res.code == 200) {
                message.success('入库成功！');
            } else {
                message.error('入库失败！');
            }
        }))
    }
    const getList = (page, rank, size,typeLevel, moneyFrom, moneyTo, name, type) => {
        http({
            url: 'api/goods/getStockGoodsList',
            method: "post",
            params: {
                // page:1,rank:0,size:10,moneyFrom:"",moneyTo:"",name:"",type:""
                page, rank, size,typeLevel, moneyFrom, moneyTo, name, type
            }
        }).then((res => {
            res.data.forEach(item => {
                item.status = false
            })
            // console.log(res.total)
            setLength(res.total)
            setData(res.data)
            store.setrukuData(res.data)
            // console.log(rank)
            setDataId([])
           
        }))
    }
    const [dataId, setDataId] = useState([])
    const [data, setData] = useState([]);
    const [length,setLength]=useState(0)
    
    let click = (id) => {
        let sdata = [...data]
        let dId = [...dataId]
        sdata.forEach((item, index) => {
            if (item.id == id) {
                if (sdata[index].status == false) {
                    dId.push(sdata[index].id)
                } else {
                    dId.forEach((item, index1) => {
                        if (item == sdata[index].id) {
                            dId.splice(index1, 1)
                        }
                    })
                }
                sdata[index].status = !sdata[index].status
            }
        })
        setData(sdata)
        setDataId(dId)
        // console.log(dId)
        
        // sdata[0].price=90;
    }
    
    let goods = data.map((item, index) => {
        return (
            <div
                key={index}
                className='rukuGood'
                onClick={() => {
                    click(item.id)
                }}>
                <img src={item.img} alt="" className='rukuImage'/>
                <div className='rukuPrice'>
            <span>
            ￥{item.price}
            </span>
                    <br style={{margin: 0}}/>
                    <span className='span2'>
              预计收入{item.profit}元
            </span>
                </div>
                <div className='rukuData'>
                    <span>{item.name}</span>
                    <div className='rukuBox'>
                        <div className='rukuKucun'>
                            <p><HddOutlined style={{color: '#213dc0'}}/>库存：{item.stockNum}件</p>
                            <p><AccountBookOutlined style={{color: '#213dc0'}}/>月销：{item.salesNum}件</p>
                        </div>
                        <div className='rukuBiaozhu'>
                            {item.status ? "已标注" : "标注"}
                            <p>
                                <TagOutlined style={{fontSize: '30px'}}/>
                            </p>
                        </div>
                    </div>
                </div>
                <p className='yibiaozhu' style={{display: item.status ? "block" : "none"}}>
                    <TagOutlined style={{color: '#213dc0'}}/>
                    已标注
                </p>
            </div>
        )
    })
    return (
        <div id='goodRuku'>
            <Handle getChildData={getList}/>
            <div className='rukuList'>
                {goods}
            </div>
            <Footer
                text={"入库"}
                setdataId={dataId}
                getChildData={getList}
                datalength={length}
                 ruku={ruku}
            />
        </div>
    )
}

export default Ruku;